<template>
    <div class="wx-bind-page">
        <div class="open-id-container">
            <p>当前绑定的OpenID: {{ user.openId || '未绑定' }}</p>
            <el-button v-if="user.openId" type="danger" @click="unbindOpenId">解除绑定</el-button>
        </div>
        <el-button v-if="!user.openId" type="primary" @click="load">绑定微信</el-button>
        <div class="qr-code-container" v-if="showQrCode">
            <img :src="qrCodeUrl" alt="QR Code" />
        </div>
    </div>
</template>

<script>
import qs from "qs";
export default {
    name: "wx",
    data() {
        return {
            qrCodeUrl: '',
            sceneStr: '',
            intervalId: null,
            showQrCode: false,
            updateUser: {
                userId: "",
                openId: ""
            },
            user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
        };
    },
    methods: {
        load() {
            this.request.get('/qrCodeFirstLogin/getQrCode').then(data => {
                if (data.code == 200) {
                    this.sceneStr = data.data.sceneStr;
                    this.qrCodeUrl = "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=" + data.data.ticket;
                    this.showQrCode = true;
                    console.log("scenstr: " + this.sceneStr + "   qrCodeurl: " + this.qrCodeUrl)
                    this.intervalId = setInterval(this.getOpenId, 5000);
                } else {
                    console.log(data.msg);
                }
            });
        },
        getOpenId() {
            console.log("getopenid 中的eventkey: " + this.sceneStr);
            this.request.get("/qrCodeFirstLogin/getBindOpenId?eventKey=" + this.sceneStr).then(res => {
                console.log("========getOpenId==========");
                console.log(res);
                if (res.code == 200) {
                    clearInterval(this.intervalId);
                    this.updateUser.userId = this.user.id;
                    this.updateUser.openId = res.data.codeLoginKey.openId;

                    this.request.post("/qrCodeFirstLogin/updateOpenId?" + qs.stringify(this.updateUser))
                        .then(response => {
                            console.log("========updateOpenId==========");
                            console.log(response)
                            if (response.code == 200) {
                                this.$message.success("绑定成功");
                                this.user = response.data.user;  // 更新本地用户信息
                                localStorage.setItem("user", JSON.stringify(this.user));  // 更新本地存储
                                this.showQrCode = false;  // 隐藏二维码
                            } else {
                                this.$message.error(response.msg);
                            }
                        })
                        .catch(error => {
                            console.error("Error updating OpenId:", error);
                        });
                } else {
                    console.log(res.msg);
                }
            });
        },
        unbindOpenId() {
            this.request.post("/qrCodeFirstLogin/unbindOpenId?userId=" + this.user.id)
                .then(response => {
                    if (response.code == 200) {
                        this.$message.success("解除绑定成功");
                        this.user = response.data.user;  // 更新本地用户信息
                        
                        localStorage.setItem("user", JSON.stringify(this.user));  // 更新本地存储
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(error => {
                    console.error("Error unbinding OpenId:", error);
                });
        }
    },
    beforeDestroy() {
        if (this.intervalId) {
            clearInterval(this.intervalId);
        }
    }
};
</script>

<style scoped>
.wx-bind-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
}

.qr-code-container {
    margin-top: 20px;
    /* 调整二维码与OpenID显示的间距 */
}

.open-id-container {
    font-size: 16px;
    color: #fff;
    /* 将字体颜色设置为白色 */
    margin-bottom: 20px;
    /* 增加与二维码之间的间距 */
}

.bind-wechat-button {
    margin-bottom: 20px;
}
</style>
